<template>
	<div>
		<div class="header_goods">
			<div class="inputall">
				<el-input placeholder="请输入商品名称" class="inptas" v-model="inputgoodsname"
					@keyup.enter.native="seachname"></el-input>
				<el-input placeholder="请输入最低价格" class="inptas" v-model="inputmin"
					@keyup.enter.native="seachPrice"></el-input>
				<span class="heng">~</span>
				<el-input placeholder="请输入最高价格" class="inptas" v-model="inputmax"
					@keyup.enter.native="seachPrice"></el-input>
				<el-button class="search" type="primary" @click.native="seachAll" icon="el-icon-search">搜索</el-button>

			</div>
			<el-button type="primary" v-if="backFlag" class="backbtn" @click="backmessage">返回</el-button>
			<div v-if="adminRole!=2" class="add" @click="JumpAdd">
				<el-image :src="url"> </el-image>
				<p>添加</p>
			</div>
		</div>
		<div class="banner-table">
			<el-table :data="pageTicket" style="width: 100%">
				<el-table-column label="商品图片">
					<template slot-scope="scope">
						<el-image :src="basurl + scope.row.wareCover"
							style="width: 50px; height:50px;border-radius: 10px;"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="wareName" label="商品名称">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="light" :content="pageTicket[scope.$index].wareName"
							placement="right-end">
							<span class="tooitp">{{pageTicket[scope.$index].wareName }}</span>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column prop="price" label="商品原价">
				</el-table-column>
				<el-table-column prop="brandName" label="品牌">
				</el-table-column>
				<el-table-column prop="flavorName" label="香型">
				</el-table-column>
				<el-table-column prop="proofName" label="度数">
				</el-table-column>
				<el-table-column prop="downStatus" label="上架状态">
					<template slot="header" slot-scope="scope">
						<el-dropdown @command="xiajia" trigger="click">
							<span class="el-dropdown-link">
								上架状态<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="2">全部</el-dropdown-item>
								<el-dropdown-item command="0">已下架</el-dropdown-item>
								<el-dropdown-item command="1">已上架</el-dropdown-item>

							</el-dropdown-menu>
						</el-dropdown>
					</template>
					<template slot-scope="scope">
						
						<span v-if="scope.row.downStatus == 0">已下架</span>
						<span v-if="scope.row.downStatus == 1">已上架</span>
					</template>
				</el-table-column>
				<el-table-column prop="num" label="库存量">
				</el-table-column>
				<el-table-column prop="vipPrice" label="会员价">
				</el-table-column>

				<el-table-column prop="type" label="商品类别">
					<template slot="header" slot-scope="scope">

						<el-dropdown @command="leibie" trigger="click">
							<span class="el-dropdown-link">
								商品类型<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="2"> 全部 </el-dropdown-item>
								<el-dropdown-item command="0">普通商品</el-dropdown-item>
								<el-dropdown-item command="1"> 积分商品 </el-dropdown-item>

							</el-dropdown-menu>
						</el-dropdown>
					</template>

					<template slot-scope="scope">
						<span v-if="scope.row.type == 0">普通商品</span>
						<span v-if="scope.row.type == 1">积分商品</span>
					</template>

				</el-table-column>

				<el-table-column v-if="adminRole!=2" label="操作" style="width: 200px;">
					<template slot-scope="scope">
						<div class="scope">
							<el-button type="primary" @click="revisegoods(scope.row)"
								style="padding: 7px 10px;font-size: 12px;">修改</el-button>
							<el-button type="danger" @click="dddell(scope.row)"
								style="padding: 7px 10px;font-size: 12px;">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog title="确定要删除吗？" :visible.sync="dialogVisible" width="30%" center>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="delgoods">确 定</el-button>
					<el-button @click="dialogVisible = false">取 消</el-button>
				</span>
			</el-dialog>
			<!--分页-->
			<el-row>
				<el-col class="fenye">
					<!--  @size-change="handleSizeChange" -->
					<el-pagination :page-size.sync="pagesize" @current-change="handleCurrentChange"
						layout="total,prev, pager, next" :page-count="total" :current-page.sync="pageIndex">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false,
				/* urla: require('../assets/图层3.jpg'), */
				url: require('../assets/add.png'),
				basurl: require('../assets/baseUrl').baseUrl,
				total: 0, //总数据条数
				pageIndex: 1, //当前所在页默认是第一页
				pagesize: 5, //每页显示多少行数据 默认设置为10
				ticket: [], //图片拼接
				pageTicket: [], //分页后的当前页数据
				Productcategory: null, //商品类别
				Listingstatus: null, //上架状态
				inputgoodsname: "", //商品名称搜索
				inputmin: "", //搜索最低价格
				inputmax: "", //搜索最高价格
				backFlag: false,
				row: {},
				adminRole:0,//判断登录状态
			}
		},
		methods: {
			dddell(row) {
				this.row = row
				this.dialogVisible = true
			},
			delgoods() {
				/* console.log(row) */
				this.$http.post(this.basurl + "ware/deleteWare", {
					wareId: this.row.wareId
				}).then(res => {
					if (res.data.code == 200) {
						this.$message.success("删除成功")
						this.dialogVisible = false
						if (this.inputgoodsname != "") {
							this.getgoodsname()

						} else if (this.inputmin != "" || this.inputmax != "") {
							this.getgoodsPrice()
						} else if (this.Productcategory != null) {
							this.handleCommandaaa(this.Productcategory)
						} else if (this.Listingstatus != null) {
							this.handleCommand(this.Listingstatus)
						} else {
							this.getTicket()
						}
					}
				})
			},
			
			seachPrice() {
				this.pageIndex = 1
				this.getgoodsPrice()
			},
			
			//按钮搜索
			seachAll() {
				if (this.inputgoodsname) {
					
					this.getgoodsname()
				} else if (this.inputmin || this.inputmax) {
					
					this.getgoodsPrice()
				}else{
					
					this.getTicket()
				}
			},

			//价格和名字
			getgoodsPriceallname() {
				// console.log(111)
				this.$http.post(this.basurl + "ware/wareListByNamePrice", {
					pageIndex: this.pageIndex,
					pageSize: this.pagesize,
					minPrice: this.inputmin,
					maxPrice: this.inputmax,
					wareName: this.inputgoodsname
				}).then(res => {
					/*  console.log(res) */
					if (res.data.code == 200) {
						this.total = res.data.data.pageCount
						this.pageTicket = res.data.data.wareList
					} else {
						this.pageTicket = []
						this.total = 1
					}
				})
			},


			//价格搜索
			getgoodsPrice() {
				if (this.inputgoodsname && this.inputmin && this.inputmax) {
					//this.$http.post(this.basurl + "ware/wareListByNamePrice", {
					this.$http.post(this.basurl + "ware/searchAllWare", {
						pageIndex: this.pageIndex,
						pageSize: this.pagesize,
						minPrice: this.inputmin,
						maxPrice: this.inputmax,
						wareName: this.inputgoodsname
					}).then(res => {
						/*  console.log(res) */
						if (res.data.code == 200) {
							this.total = res.data.data.pageCount
							this.pageTicket = res.data.data.wareList
						} else {
							this.pageTicket = []
							this.total = 1
						}
					})
				} else {
					this.Listingstatus = null
					this.Productcategory = null
					this.inputgoodsname = ''
					this.$http.post(this.basurl + "ware/wareListByPrice", {
						pageIndex: this.pageIndex,
						pageSize: this.pagesize,
						minPrice: this.inputmin,
						maxPrice: this.inputmax
					}).then(res => {
						/*  console.log(res) */
						if (res.data.code == 200) {
							this.total = res.data.data.pageCount
							this.pageTicket = res.data.data.wareList
						} else {
							this.pageTicket = []
							this.total = 1
						}
					})
				}
			},
			seachname() {
				this.pageIndex = 1
				this.getgoodsname()
			},
			//名字搜索
			getgoodsname() {
				this.$route.query.message = ""
				if (this.inputgoodsname && this.inputmin && this.inputmax) {
					//ware/searchAllWare
					//this.$http.post(this.basurl + "ware/wareListByNamePrice", {
					this.$http.post(this.basurl + "ware/searchAllWare", {
						pageIndex: this.pageIndex,
						pageSize: this.pagesize,
						minPrice: this.inputmin,
						maxPrice: this.inputmax,
						wareName: this.inputgoodsname
					}).then(res => {
						/*  console.log(res) */
						if (res.data.code == 200) {
							this.total = res.data.data.pageCount
							this.pageTicket = res.data.data.wareList
						} else {
							this.pageTicket = []
							this.total = 1
						}
					})
				} else {
					this.Listingstatus = null
					this.Productcategory = null
					/*       this.inputmin = ""
					      this.inputmax = "" */
					this.$http.post(this.basurl + "ware/wareListByName", {
						pageIndex: this.pageIndex,
						pageSize: this.pagesize,
						wareName: this.inputgoodsname


					}).then(res => {
						/*   console.log(res) */
						if (res.data.code == 200) {
							/*   console.log(res) */
							this.total = res.data.data.pageCount
							this.pageTicket = res.data.data.wareList

						} else {
							this.pageTicket = []
							this.total = 1
						}
					})
				}
			},
			//分页
			handleCurrentChange(row) {
				this.pageIndex = row
				if (this.inputgoodsname != "") {
					this.getgoodsname()

				} else if (this.inputmin != "" || this.inputmax != "") {
					this.getgoodsPrice()
				} else if (this.Productcategory != null) {
					this.handleCommandaaa(this.Productcategory)
				} else if (this.Listingstatus != null) {
					this.handleCommand(this.Listingstatus)
				} else if (this.$route.query.message) {
					this.getmessage();
				} else {
					this.getTicket()
				}
			},
			leibie(a) {
				this.pageIndex = 1
				this.handleCommandaaa(a)
			},
			//商品类别
			handleCommandaaa(a) {
				this.inputmin = ""
				this.inputmax = ""
				this.inputgoodsname = ""
				this.Productcategory = a
				//console.log('this.Listingstatus',this.Listingstatus)
				if (this.Listingstatus != null) {
					if (a == 2) {
						//this.$http.post(this.basurl + 'ware/wareListByDown', {
						this.$http.post(this.basurl + 'ware/searchAllWare', {
							pageIndex: this.pageIndex,
							pageSize: this.pagesize,
							downStatus: this.Listingstatus
						}).then(res => {
							/*  console.log(res) */
							/*  console.log("xia") */
							if (res.data.code == 200) {
								this.Productcategory = null
								this.total = res.data.data.pageCount
								this.pageTicket = res.data.data.wareList
							} else {
								this.pageTicket = []
								this.total = 1
							}
						})
					} else {
						//this.$http.post(this.basurl + "ware/wareListByDownType", {
						this.$http.post(this.basurl + "ware/searchAllWare", {
							pageIndex: this.pageIndex,
							pageSize: this.pagesize,
							type: Number(this.Productcategory),
							downStatus: this.Listingstatus
						}).then(res => {
							if (res.data.code == 200) {
								/*   console.log(res) */
								this.total = res.data.data.pageCount
								this.pageTicket = res.data.data.wareList
							} else {
								this.pageTicket = []
								this.total = 1
							}
						})
					}

				} else {
					if (this.Productcategory == 2) {
						this.getTicket()
						this.Productcategory = null

					} else {
						//this.$http.post(this.basurl + 'ware/wareListByType', {
						this.$http.post(this.basurl + 'ware/searchAllWare', {
							pageIndex: this.pageIndex,
							pageSize: this.pagesize,
							type: Number(this.Productcategory)
						}).then(res => {
							/* console.log(res) */
							if (res.data.code == 200) {
								this.total = res.data.data.pageCount
								this.pageTicket = res.data.data.wareList
							} else {
								this.pageTicket = []
								this.total = 1
							}
						})
					}

				}

			},
			xiajia(index) {
				this.pageIndex = 1
				this.handleCommand(index)
			},
			//是否下架
			handleCommand(a) {
				this.inputmin = ""
				this.inputmax = ""
				this.inputgoodsname = ""
				this.Listingstatus = a
				if (this.Productcategory != null) {
					if (a == 2) {
						//this.$http.post(this.basurl + 'ware/wareListByType', {
						this.$http.post(this.basurl + 'ware/searchAllWare', {
							pageIndex: this.pageIndex,
							pageSize: this.pagesize,
							type: this.Productcategory
						}).then(res => {
							/* console.log(res) */
							if (res.data.code == 200) {
								this.Listingstatus = null
								this.total = res.data.data.pageCount
								this.pageTicket = res.data.data.wareList
							} else {
								this.pageTicket = []
								this.total = 1
							}
						})
					} else {
						//this.$http.post(this.basurl + "ware/wareListByDownType", {
						this.$http.post(this.basurl + "ware/searchAllWare", {
							pageIndex: this.pageIndex,
							pageSize: this.pagesize,
							type: this.Productcategory,
							downStatus: this.Listingstatus
						}).then(res => {
							if (res.data.code == 200) {
								/*    console.log(res) */
								this.total = res.data.data.pageCount
								this.pageTicket = res.data.data.wareList
							} else {
								this.pageTicket = []
								this.total = 1
							}
						})
					}

				} else {
					if (this.Listingstatus == 2) {
						this.getTicket()
						this.Listingstatus = null
					} else {
						//this.$http.post(this.basurl + 'ware/wareListByDown', {
						this.$http.post(this.basurl + 'ware/searchAllWare', {
							pageIndex: this.pageIndex,
							pageSize: this.pagesize,
							downStatus: this.Listingstatus
						}).then(res => {
							/*  console.log(res) */
							/*  console.log("xia") */
							if (res.data.code == 200) {
								this.total = res.data.data.pageCount
								this.pageTicket = res.data.data.wareList
							} else {
								this.pageTicket = []
								this.total = 1
							}
						})
					}

				}

			},
			// 获取页面的表格所有数据
			getTicket() {
				this.$http.post(this.basurl + 'ware/wareList', {
					pageIndex: this.pageIndex,
					pageSize: this.pagesize,
				}).then(res => {
					if (res.data.code == 200) {
						this.total = res.data.data.pageCount
						this.pageTicket = res.data.data.wareList
					} else {
						this.pageTicket = []
						this.ticket = []
						this.total = 1
					}
				})
			},
			//下架状态
			JumpAdd() {
				this.$router.push("/projectmananger/ProjectListAdd")
			},
			revisegoods(row) {
				this.$router.push("/projectmananger/ProjectListAdd?newwareId=" + row.wareId)
			},
			//返回分类
			backmessage() {
				this.$router.push("/message")
			},
			//获取分类跳转的数据
			getmessage() {
				this.$http.post(this.basurl + "searchClassify", {
					brand: this.$route.query.brand,
					flavor: this.$route.query.flavor,
					degree: this.$route.query.proof,
					pageIndex: this.pageIndex,
					pageSize: this.pagesize
				}).then(res => {
					/* console.log("搜索返回", res); */
					if (res.data.code == 200) {
						/*   console.log("页面数据", res) */
						this.total = res.data.data.pageCount
						this.pageTicket = res.data.data.wareList
					} else {
						this.pageTicket = []
						this.ticket = []
						this.total = 1
					}
				})
			}
		},
		mounted() {
			this.adminRole = sessionStorage.getItem("adminRole")
			if (!this.$route.query.message) {
				this.getTicket()
			} else {
				this.backFlag = true
				this.getmessage()
			}
		},
	}
</script>
<style lang="less">
	.header_goods {
		width: 80vw;
		display: flex;
		height: 65px;
		align-items: center;
		margin-bottom: 15px;
		margin-left: 30px;
		justify-content: space-between;
		position: relative;

		.search {
			display: flex;
			align-items: center;
			.el-input {
				margin: 0 5px;
			}
		}

		.inputall {
			display: flex;
			align-items: center;

			.el-input {
				margin: 0 5px;

			}

			.el-button--primary>span {
				position: relative;
				left: 0;
				top: 0;
			}

		}

		.backbtn {
			position: absolute;
			right: 80px;
		}

		.add {
			width: 30px;
			font-size: 12px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			cursor: pointer;

			img {
				margin-right: 0;
			}

			p {
				text-align: center;
				cursor: pointer;
			}




		}


	}

	.banner-table {
		margin-left: 30px;
		width: 80vw;

		.cell .tooitp {
			display: inline-block;
			width: 90px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.el-button--primary>span {
			position: relative;
			left: 0;
			top: 0;
		}

		.el-table th.el-table__cell>.cell {
			text-align: center;
		}

		.el-table td.el-table__cell div {
			text-align: center;
		}

		.el-pagination {
			display: block;
		}

		.fenye {
			text-align: center;
		}

		.scope {
			display: flex;
		}

		.el-button--mini,
		.el-button--mini.is-round {
			padding: 5px 6px;
		}
	}
</style>